<template>
  <div class="plate-wrap">
    <div class="title">担保平台</div>
    <div class="plate-container">
      <ul>
        <li class="header">
          <div>平台名称</div>
          <div>担保人数</div>
          <div>担保链接</div>
        </li>
        <li
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="plate">
            <img :src="item.logo" />
            <span>{{item.name}}</span>
          </div>
          <div>{{item.user}}人</div>
          <div>
            <span class="join-btn" @click="joinCompany">加入</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuaranteePlate',
  data() {
    return {};
  },
  created() {
    this.getData();
  },
  methods: {
    joinCompany() {},
    getData() {
      this.list = [{
        id: 1,
        logo: 'http://dbadmin.ixinkexin.com/uploads/img/20130101/781df63fb6ac26e4aabbf217f20d7c70.png',
        name: '扑克之星',
        user: 13871
      }, {
        id: 2,
        logo: 'http://dbadmin.ixinkexin.com/uploads/img/20130101/781df63fb6ac26e4aabbf217f20d7c70.png',
        name: '尊龙娱乐',
        user: 13618
      }, {
        id: 3,
        logo: 'http://dbadmin.ixinkexin.com/uploads/img/20130101/781df63fb6ac26e4aabbf217f20d7c70.png',
        name: '凯时娱乐',
        user: 13034
      }];
    }
  }
};
</script>

<style lang="less" scoped>
  .plate-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 20px;
    margin-top: 30px;
    .title {
      margin-bottom: 20px;
      padding-left: 20px;
      border-left: 4px solid #1d79ff;
      font-size: 20px;
      font-weight: 600;
    }
    .plate-container {
      flex: 1;
      border-radius: 8px;
      background-color: #fff;
      li {
        display: flex;
        height: 60px;
        line-height: 60px;
        > div {
          justify-content: center;
          &:nth-of-type(1) {
            display: flex;
            flex: 4;
            align-items: center;
          }
          &:nth-of-type(2) {
            flex: 3;
          }
          &:nth-of-type(3) {
            flex: 2;
          }
        }
        img {
          margin-right: 5px;
          width: 40px;
          height: 40px;
        }
        .join-btn {
          padding: 3px 15px;
          border-radius: 3px;
          color: #fff;
          background-color: #ff6900;
          cursor: pointer;
          &:hover {
            opacity: .8;
          }
        }
      }
      .header {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: #5e9fff;
        color: #fff;
      }
    }
  }
</style>
